<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直对齐属性</title>
		<style>
			/* 所有图片变小 */
			p img{
				border: 1px solid red;
				width: 100px;
				height: 100px;
			}
			p img.baseline{
				border: 1px solid red;
				vertical-align: baseline; /* 默认 */
			}
			p img.top{
				vertical-align: top;
			}
			p img.middle{
				vertical-align: middle;
			}
			p img.bottom{
				vertical-align: bottom;
			}
		</style>
	</head>
	<body>
		<!-- 表格常用属性：vertical-align 对齐4种 
		     与行内/行块元素共用：文本与图片对齐模式
		
		-->
		<p>太乙真人<img src="img/太乙真人.png" alt="太乙真人" class="baseline">基线对齐</p>
		<p>魔丸<img src="img/魔丸.png" alt="魔丸" class="top">顶部对齐</p>
		<p>魔童<img src="img/魔童.png" alt="魔童" class="middle">居中对齐</p>
		<p>申公豹<img src="img/申公豹.png" alt="申公豹" class="bottom">底部对齐</p>
	</body>
</html>